import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import { getWinningLog } from '@/api/luck'

import './index.scss'
interface State {
  activityId: number | string
  list: any
  page: number
  isTotal: boolean
}

export default class Index extends Component {
  $instance = getCurrentInstance();

  constructor(props) {
    super(props)
    this.state = {
      activityId: '',//活动id
      list: [],//中奖记录
      page: 1,//当前页数
      isTotal: false,// 是否可以继续下拉
    }
  }

  state: State

  // 监听用户下拉刷新事件
  onPullDownRefresh() {
    this.setState({
      list: [],//中奖记录
      page: 1,//当前页数
      isTotal: false
    }, () => {
      // 获取抽奖记录
      this.getWinningLog()
    })
  }

  UNSAFE_componentWillMount() { }
  componentDidMount() {
    // 获取活动id
    const { activityId } = this.$instance.router.params
    this.setState({
      activityId
    }, () => {
      // 获取抽奖记录
      this.getWinningLog()
    })
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }

  // 获取抽奖记录
  async getWinningLog() {
    const { activityId, list, page, isTotal } = this.state
    console.log('isTotal: ', isTotal);
    if (!isTotal) {
      await getWinningLog({ activityId, query: { "filter": { "and": [] }, "perPage": 20, "page": page } }).then((res) => {
        Taro.stopPullDownRefresh()
        const { data: { data } } = res
        const total = res.header['X-Pagination-Total-Count']
        // 设置时间格式
        data.forEach((val, idx, arr) => {
          const time = new Date(Number(val.createdAt + '000'))
          arr[idx]['time'] = `${time.getFullYear()}.${this.completion(time.getMonth() + 1)}.${this.completion(time.getDate())}  ${this.completion(time.getHours())}:${this.completion(time.getMinutes())}:${this.completion(time.getSeconds())}`
        })
        const newList = list.length == 0 ? data : [...list, ...data]
        this.setState({
          list: newList,
          page: page + 1,
          isTotal: newList.length >= total ? true : false
        })
      }).catch(() => {
        Taro.stopPullDownRefresh()
      })
    }
  }

  //补0
  completion(val) {
    if (val < 10) {
      return '0' + val
    } else {
      return val
    }
  }

  onReachBottom() {
    const { isTotal } = this.state
    if (!isTotal) {
      // 获取抽奖记录
      this.getWinningLog()
    }
  }

  render() {
    const { list } = this.state;
    return (
      <View className="body" >
        <View className="list">
          {
            list && list.length > 0 && list.map((val) => {
              return (
                <View className="detail" key={val.time}>
                  <View className="detail_left">
                    <Image className="detail_left_img" src={val.awardPath} />
                  </View>
                  <View className="detail_right">
                    <View className="detail_right_head">
                      <View className="detail_right_head_title">{val.awardName}</View>
                      {/* <View className="detail_right_head_price">价值：<View className="red">￥256</View></View> */}
                    </View>
                    <View className="detail_right_time">
                      {val.time}
                    </View>
                  </View>
                </View>
              )
            })
          }
        </View>
        <View className="bottom">
          我是有底线的~
        </View>
      </View>
    )
  }
}
